<template>
  <div class="event1">
    <h3>我是event4组件:实现v-model</h3>
    <el-input v-model="userName" @change="userNameChange"></el-input>
    <h4>子组件v-model的值：{{ modelValue }}</h4>
    <el-button @click="clickAddOne">点我值加1000</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
let userName = ref("");
let props = defineProps(["modelValue"]);
let $emit = defineEmits(["update:modelValue"]);
const userNameChange = () => {
  console.log("userName", userName.value);
};
const clickAddOne = () => {
  $emit("update:modelValue", props.modelValue + 1000);
};
</script>

<style scoped lang="scss">
.event1 {
  height: 200px;
  width: 400px;
  background: pink;
}
</style>
